<template>
<div class="projects">
    <div class="box-top">
        <el-form @submit.native.prevent class="form-between">
            <el-form-item>
                <!-- <el-button v-show="projectMode==='card'" @click="chengeSortOrder" round icon="el-icon-sort">{{sortOrder?'正序':'倒序'}}</el-button>
                <i @click="changeProjectMode('list')" :class="`iconfont icon-liebiao ${projectMode==='list'?'is-active':''}`"></i>
                <i @click="changeProjectMode('card')" :class="`iconfont icon-kapian ${projectMode==='card'?'is-active':''}`"></i> -->
                <el-button type="primary" v-hasPermission="'project:operate'" @click="resetForm">新增项目</el-button>
            </el-form-item>
            <el-form-item>
                <el-input
                    @keyup.enter.native="handleSearch(true)"
                    @clear="handleSearch(true)"
                    placeholder="请输入项目名称"
                    clearable
                    v-model="queryForm.name">
                    <i @click="handleSearch(true)" slot="prefix" class="iconfont icon-sousuo"></i>
                </el-input>
                <!-- <el-select @change="handleSelectLeader" @clear="tableData.rows=oldTableList" clearable v-model="projectLeader" placeholder="请选择项目负责人">
                    <el-option
                        v-for="(item, i) in projectLeaders"
                        :key="i"
                        :label="item"
                        :value="item">
                    </el-option>
                </el-select> -->
            </el-form-item>
        </el-form>
    </div>
    <div class="box-table">
        <table-list :tableData="tableData"></table-list>
        <!-- <card-list v-show="projectMode==='card'" :key="cardListKey" :cardData="tableData"></card-list> -->
        <div class="box-pagenation" v-if="tableData.rows.length>0">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableData.currentPage" :page-size="tableData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
            </el-pagination>
        </div>
    </div>
    <add-dialog v-if="addForm.show" :addForm="addForm" @save="handleSave"></add-dialog>
</div>
</template>

<script>
import AddDialog from './AddDialog'
import TableList from './TableList'
// import CardList from './CardList'
export default {
    name: 'ProjectsIndex',
    components: {
        AddDialog,
        TableList
        // CardList
    },
    data () {
        return {
            projectLeader: '',
            projectLeaders: [],
            tableData: {
                total: 0,
                pageSize: 10,
                currentPage: 1,
                loading: false,
                isSearch: false,
                rows: []
            },
            oldTableList: [],
            addForm: {
                show: false,
                title: '新增项目',
                form: {
                    projectName: null,
                    projectCode: null,
                    projectDesc: null
                }
            },
            queryForm: {
                name: null
            },
            roleList: [],
            sortOrder: true,
            // projectMode: 'list',
            cardListKey: 0
        }
    },
    created () {
        this.init()
    },
    methods: {
        changeProjectMode (val) {
            // if (val === 'list') {}
            this.projectMode = val
        },
        handleSelectLeader (val) {
            this.tableData.rows = this.oldTableList.filter(v => {
                return v.ownerUserName === val
            })
        },
        handleCurrentChange (val) {
            this.tableData.currentPage = val
            this.handleSearch()
        },
        handleSizeChange (val) {
            this.tableData.pageSize = val
            this.handleSearch()
        },
        chengeSortOrder () {
            this.sortOrder = !this.sortOrder
            this.tableData.rows = this.bubbleSort(this.tableData.rows)
            this.cardListKey++
        },
        bubbleSort (arr) {
            for (var i = 0; i < arr.length; i++) {
                for (var j = 0; j < arr.length - i - 1; j++) {
                    if (!this.sortOrder) {
                        if (arr[j].createTime > arr[j + 1].createTime) {
                            var a = arr[j]
                            arr[j] = arr[j + 1]
                            arr[j + 1] = a
                        }
                    } else {
                        if (arr[j].createTime < arr[j + 1].createTime) {
                            var c = arr[j]
                            arr[j] = arr[j + 1]
                            arr[j + 1] = c
                        }
                    }
                }
            }
            return arr
        },
        handleSave () {
            this.$post('/project/add', this.addForm.form).then(res => {
                if (res) {
                    this.$message.success('保存成功')
                    this.addForm.show = false
                    this.init()
                }
            })
        },
        handleSearch (flag) {
            if (flag) {
                this.tableData.currentPage = 1
            }
            this.tableData.isSearch = true
            this.init()
        },
        init () {
            const {
                name
            } = this.queryForm
            const {
                pageSize,
                currentPage
            } = this.tableData
            const params = {
                keyword: name,
                pageSize: pageSize,
                pageNum: currentPage
            }
            this.tableData.loading = true
            this.$post('/project/list', params).then(res => {
                if (res) {
                    const { rows, total } = res
                    this.tableData.rows = rows
                    this.tableData.total = total
                    this.oldTableList = rows
                    this.projectLeaders = Array.from(new Set(rows.map(v => v.ownerUserName)))
                }
            }).finally(() => {
                this.tableData.loading = false
            })
        },
        resetForm () {
            this.addForm = {
                show: true,
                title: '新增项目',
                form: {
                    projectName: null,
                    projectCode: null,
                    projectDesc: null
                }
            }
        }
    }
}
</script>

<style lang="less">
.projects {
    .is-active {
        color: #2680EB !important;
    }
    .is-round {
        line-height: 22px;
        margin-right: 33px;
        padding: 0 12px;
        min-width: 0;
    }
}
</style>
